<template>
<el-row style="margin-top: 15px">
  <el-col :span="12">
    <el-carousel :interval="4000" type="card" height="300px">
      <el-carousel-item v-for="(banner,index) in banner" :key="index">
        <el-image style="height: 300px" :src="banner" @click="toGoodsView(index+1)"/>
      </el-carousel-item>
    </el-carousel>
  </el-col>
  <el-col :span="12">
    <el-form :model="user"  class="regForm">
      <h1>用户注册</h1>
      <el-form-item>
        <el-input v-model="user.username"  prefix-icon="User" placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="user.password" type="password" placeholder="请输入密码" prefix-icon="Key" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="user.passwordAgain" type="password" placeholder="重新确认密码" prefix-icon="Key" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="user.captchaInput" placeholder="请输入验证码" prefix-icon="Picture" style="width: 175px;margin-right: 5px"/>
        <el-image :src="imageBase64Data" @click="getCaptcha"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="refBtn" @click="reg" >注册</el-button>
      </el-form-item>
    </el-form>
  </el-col>
</el-row>
</template>

<script setup>
import userApi from "@/api/userApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter();
//保存验证码
const imageBase64Data = ref('')
//注册用户信息
const user = ref({
  username:null,
  password:null,
  passwordAgain:null,
  captchaInput:null,
  key:null
})
const banner = ref([
  "/src/assets/banner/banner1.png",
  "/src/assets/banner/banner2.png",
  "/src/assets/banner/banner3.png"
])


//跳转到商品详情页面
function toGoodsView(id){
  router.push({
    path:'/user/goods', //跳转到的位置，值和页面路由种的配置的路径相同
    query:{
      id
    }
  });
}
//注册
function reg(){
  userApi.reg(user.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage({
            message: resp.msg,
            type: 'success',
            duration: 1500
          })
          router.push("/user/login");
        } else {
          ElMessage({
            message: resp.msg,
            type: 'error',
            duration: 1500
          });
        }
      })
}

//获取验证码
function getCaptcha(){
  userApi.captcha()
      .then(resp => {
        imageBase64Data.value = resp.data.imageBase64Data;
        user.value.key = resp.data.key;
      });
}

getCaptcha();
</script>

<style scoped>
.regForm{
  width: 300px;
  margin: 45px 100px;
}
.regForm h1{
  text-align: center;
  margin-bottom: 20px;
}
.refBtn{
  width: 100%;
}

</style>